<template>
  <div class="header">
    <el-row class="h100">
      <el-col :span="8" class="timer">{{ timeStr }}</el-col>
      <el-col :span="8" class="top-sysname">
        <img src="../asstes/images/left-logo.png">
        <div class="nameStyle">
          <div class="cnName">车辆监控大屏</div>
          <div class="enName">Internet Of Rolling stock</div>
        </div>
      </el-col>
      <el-col :span="8" class="top-operate">
        <el-col :span="6" class="user">
          <el-icon color="blue" size="20">
            <UserFilled />
          </el-icon>
          <div class="userName">
            {{ userName }}
          </div>
        </el-col>
        <el-col :span="2">
          <el-icon color="blue" size="20" class="cursor-pointer">
            <SwitchButton />
          </el-icon>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";

let timer: number
const timeStr = ref()
const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const userName = ref("管理员测试")
onMounted(() => {
  timer = setInterval(() => {
    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
    let day = now.getDate();
    let week = now.getDay();
    let hours = now.getHours();
    let minutes = now.getMinutes();
    let seconds = now.getSeconds();
    timeStr.value = year + "年" + month + "月" + day + "日 " + weeks[week] + ' ' + (hours < 10 ? ('0' + hours) : hours) + ":" + (minutes < 10 ? ('0' + minutes) : minutes) + ":" + (seconds < 10 ? ('0' + seconds) : seconds + "")
  }, 1000)
  // 获取用户名

})
onUnmounted(() => {
  clearInterval(timer)
})
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  min-width: 1200px;
  height: 97px;
  background: url(../asstes/images/top.png) center center no-repeat;
  user-select: none;

  .timer {
    color: #66849e;
    height: 100%;
    font-size: 16px;
    float: left;
    padding: 28px;
    text-align: left;
  }

  .h100 {
    height: 100%;
  }

  .top-sysname {
    height: 100%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .top-sysname .nameStyle {
    display: inline-block;
    color: #fff;
    text-align: left;
    height: 56px;
  }

  .top-sysname .nameStyle .cnName {
    font-size: 24px;
    font-weight: 500;
    line-height: 42px;
  }

  .top-sysname .nameStyle .enName {
    font-size: 14px;
    line-height: 0px;
  }

  .top-sysname>img {
    margin-right: 10px;
    height: 45px;
  }

  .top-operate {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .userName {
      color: #66849e;
      font-size: 16px;
    }
  }
}
</style>